<template>
  <div v-loading="loading" class="canvas-box">
    <div class="btnBox" v-if="!isMobile">
      <el-button  size="mini" @click="clear" icon="el-icon-refresh-right">重签</el-button>
      <el-button type="primary" size="mini" @click="save" icon="el-icon-check">确定</el-button>
      <el-button type="primary" size="mini" @click="close" icon="el-icon-circle-close">取消</el-button>
      <!--<img id="img" src=''/>-->
    </div>
    <div
      style="border: 1px solid #eee; width: 100%;height: 95%"
      ref="canvasBox">
      <canvas id="canvas" class="canvasId" />
    </div>
    <div class="btnBox" v-if="isMobile">
      <el-button  size="mini" @click="clear" icon="el-icon-refresh-right">重签</el-button>
      <el-button type="primary" size="mini" @click="save" icon="el-icon-check">确定</el-button>
      <el-button type="primary" size="mini" @click="close" icon="el-icon-circle-close">取消</el-button>
      <!--<img id="img" src=''/>-->
    </div>
  </div>
</template>

<script>
import {uploadFileBase64} from "@/api/upLoad.js";
import  { randomString } from "@/utils/utils.js"
import SignaturePad from "signature_pad";
export default {
  props:{
    isMobile:{
      type:Boolean,
      default:true
    }
  },
  data: () => ({
    loading:false,
    signaturePad: null,
    setInterval:null,
    config: {
      penColor: "#000", //笔刷颜色
      minWidth: 3, //最小宽度
    }
  }),
  watch:{
    isMobile(){
      if (this.$utils.isMobile()) {
        this.isMobile = true;
      }
    }
  },
  mounted() {
    let $this = this
    this.loading = true
    this.signaturePad=null
    this.setInterval = setInterval(function(){
      $this.getCanvas();
    },500)

  },
  methods: {
    getCanvas() {
      if( this.signaturePad ){
        this.loading = false
        clearInterval(  this.setInterval)
        return
      }
      var canvas = document.querySelector(".canvasId");
      this.signaturePad = new SignaturePad(canvas, this.config);
      canvas.height = this.$refs.canvasBox.clientHeight;
      canvas.width = this.$refs.canvasBox.clientWidth;
      console.log(this.signaturePad)
    },
    //保存
    save() {
      //默认保存为png格式
    //   console.log(this.signaturePad.toDataURL())
      // console.log(this.signaturePad.toDataURL('image/jpeg'))
    //   console.log(this.signaturePad.toDataURL('image/svg+xml'))
    //   console.log(this.signaturePad.isEmpty())  //判断画布有没有内容,布尔型
      if (this.signaturePad.isEmpty()) {
          return this.$message.error('请签名')
      } else {
        let postData={
          base64Image:this.signaturePad.toDataURL().split('base64,')[1] ,
          fileName: `${randomString(6)}.png`
        }
        uploadFileBase64(postData).then(res=>{
          // console.log(res)
          this.$emit('signatureConfirmation',res.data.data.fileName)
        }).catch(err=>{
          console.log('错误')
        })
        // document.getElementById('img').setAttribute( 'src', datas ); //直接显示签名
      }

    },
    //清除
    clear() {
      //清除画布内容
      this.signaturePad.clear();
    },
    close(){
      this.$emit('closeCanvas')
    }
},
  beforeDestroy(){
    console.log(2)
    this.signaturePad = null
    clearInterval(  this.setInterval)
  },
  destroyed(){
    console.log(1)
    this.signaturePad = null
    clearInterval(  this.setInterval)
  },
};
</script>

<style scoped lang="scss">
  .canvas-box{
    height:calc(100% - 100px);;
  }
.btnBox {
  padding: 10px;
  text-align: center;

}
</style>
